<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/demo.css">
    <link rel="stylesheet" href="../css/touwei.css">
    <link rel="stylesheet" href="../css/zhuce.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="./jQuery.js"></script>
    
</head>
<body>
    <header>
        <!-- 头部 -->
        <div class="header_l" class="gray">
           <p>专柜查询</p>
           <p>帮助中心</p>
        </div>
        <div id="header_m">
           <h2>ARMANI
              <p>beauty</p>
           </h2>
  
  
        </div>
        <div class="header_r">
           <p class="button">登录与注册</p>
           <p>我的购物袋
           </p>
        </div>
    
     </header>
     <!-- 导航部分 -->
    
     <nav>
        <div class="nav_m">
           <ul>
              <li class="nav_m1">年中狂欢
                 <span class="iconfont icon-fenlei
                 "></span>
                 <div class="nav_m1_one">
                    <ul>
                       <li>会员礼遇
                          <img src="../images/会员-1920X636_.jpg" alt="">
                       </li>
                       <li>限量礼盒
                          <img src="../images/礼盒入口.jpg" alt="">
                       </li>
  
                       <li>选择你的底妆
                          <img src="../images/Shade-finder02.jpg" alt="">
                       </li>
                       <!--  <li>选择你的底妆
                      <p>臻礼定制 
                       </p>
                      <p>臻礼定制</p>
                      <p>臻礼定制</p>
                      <p>臻礼定制</p -->
              </li>
           </ul>
        </div>
        </li>
        <li>全部产品
           <div class="nav_m1_two">
  
              <ul>
                 <li>明星产品
                    <img src="../images/明星单品入口.jpg" alt="">
                 </li>
                 <li>当季主推
                    <img src="../images/红气垫入口.jpg" alt="">
                 </li>
  
              </ul>
           </div>
        </li>
        <li>彩妆专区
           <div class="nav_m1_there">
              <table>
                 <tr>
                    <th>唇部</th>
                    <th>面部</th>
                    <th>眼部</th>
                    <th>美容工具</th>
  
                 </tr>
                 <tr>
                    <td>唇釉</td>
                    <td>粉底液/气垫</td>
                    <td>眉笔</td>
                    <td>专业化妆刷</td>
                 </tr>
                 <tr>
                    <td>唇膏</td>
                    <td>妆前隔离</td>
                    <td>眼线</td>
  
                 </tr>
                 <tr>
                    <td></td>
                    <td>遮瑕</td>
                    <td>眼影</td>
  
                 </tr>
                 <tr>
                    <td></td>
                    <td>腮红/胭脂</td>
                    <td>睫毛膏</td>
                 </tr>
              </table>
           </div>
        </li>
        <li>护肤专区
           <div class="nav_m1_fore">
              <table>
                 <tr>
                    <th>「黑钥匙」护肤系列</th>
                    <th>光钥新肌护肤系列</th>
                    <th>清洁防晒综合系列</th>
                    <th>男士综合护肤系列</th>
  
                 </tr>
                 <tr>
                    <td>基础清洁</td>
                    <td>基础清洁</td>
                    <td>基础清洁</td>
                    <td>洁面嗜喱</td>
                 </tr>
                 <tr>
                    <td>眼唇保养.</td>
                    <td>眼唇保养</td>
                    <td>防晒隔离</td>
                    <td>舒缓露</td>
  
                 </tr>
                 <tr>
                    <td>精华护肤</td>
                    <td>精华护肤</td>
                    <td></td>
                    <td>保湿乳</td>
  
                 </tr>
                 <tr>
                    <td>面霜/乳液.</td>
  
                 </tr>
                 <tr>
                    <td>特殊修复</td>
  
                 </tr>
              </table>
           </div>
        </li>
        <li>香水专区
           <div class="nav_m1_five">
              <table>
                 <tr>
                    <th>高定私藏香氛</th>
                    <th>女士香水系列</th>
                    <th>男士香水系列</th>
                    <th>明星系列</th>
  
                 </tr>
                 <tr>
                    <td>全新清新系列</td>
                    <td>阿玛尼挚爱香水</td>
                    <td>阿玛尼寄情香水</td>
                    <td>高定私藏香氛</td>
                 </tr>
                 <tr>
                    <td>经典系列.</td>
                    <td>全新MY WAY香水</td>
                    <td></td>
                    <td>挚爱系列</td>
  
                 </tr>
                 <tr>
                    <td>寄情系列</td>
  
  
                 </tr>
  
              </table>
           </div>
        </li>
        <li>大师匠心</li>
        </ul>
  
        <div class="nav_r"> <span>红管</span>
           <span class="iconfont icon-search"></span>
        </div>
  
  
  
     </nav>

<!-- 中间部分 -->

<main>
      <div class="zhuce">
        <div><span  class="zhuce-one">注册</span><span class="zhuce-two">验证码注册</span></div>
        <div>
         <input id="username" type="text" placeholder="请输入手机号"  >
         <input type="button" value="获取短信验证码" class="zhuce-fore">
        </div>
        <input id="userpass" type="text" placeholder="请输入密码/验证码"  >


        <input id="btnReg" type="button" value="注册" />
       
        <div id="messageBox">
   
      </div>
 
      </div>

</main>


      <!-- 尾部 -->
      <footer>

        <div class="footer_o">
           <div class="footer_o1"><span>专柜查询</span>
              <input type="text">
           </div>
           <div class="footer_o2">
              <span>关注我们</span>
              <div class="footer_o2_one">
                 <img src="../images/li3.png" alt="">
                 <div class="footer_o2_one1">
  
                 </div>
              </div>
  
              <div class="footer_o2_two">
                 <img src="../images/li5.png" alt="">
                 <div class="footer_o2_two1">
                    <img src="../images/erweima.2dbf6911.jpg" alt="">
                 </div>
              </div>
              <div class="footer_o2_there">
                 <img src="../images/li16.png" alt="">
                 <div class="footer_o2_there1">
                    <img src="../images/erweima.2dbf6911.jpg" alt="">
                 </div>
              </div>
           </div>
        </div>
        <div class="footer_t">
           <table cellspacing="0px" cellpading="0px">
              <tr>
                 <th>彩妆专区</th>
                 <th>护肤专区</th>
                 <th>香水专区</th>
                 <th>明星产品</th>
                 <th>帮助中心</th>
              </tr>
              <tr>
                 <td>唇部</td>
                 <td>「黑钥匙」护肤系列</td>
                 <td>男士</td>
                 <td>阿玛尼[传奇红管J唇釉</td>
                 <td>常见问题</td>
              </tr>
              <tr>
                 <td>面部</td>
                 <td>光钥新肌护肤系列</td>
                 <td>女士</td>
                 <td>阿玛尼大师[蓝气垫J</td>
                 <td>订单查询</td>
              </tr>
              <tr>
                 <td>眼部</td>
                 <td>清洁防晒综合系列</td>
                 <td></td>
                 <td>阿玛尼自我无界香水</td>
                 <td>订单查询</td>
              </tr>
              <tr>
                 <td>美容工具</td>
                 <td>男士综合护肤系列</td>
  
              </tr>
           </table>
        </div>
        <div class="footer_th">
           <img src="../images/li8.png" alt="">
           <p>国家药监局提示您:宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注国妆特字或者“国妆特进字的标准文号。</p>
           <p>
              <span>沪公网安备31010602001530号中国工商 沪ICP备08100043号 21</span>
  
           </p>
           <p class="footer_th_m">OL'Oreal China欧莱雅(中国)有限公司版权所有</p>
           <p>GIORGIO ARMANI阿玛尼美妆中国官网，GIORGIO ARMANI阿玛尼美妆天猫旗舰店，阿玛尼美妆官方微信精品商城，为官方认证渠道。</p>
        </div>
     </footer>
</body>
</html>


<script >
	function isTest() {
		return isUserName() && isPass();
	}
	//1、用户名的前端验证
	function isUserName() {
		//1)、非空判断
		if ($("#username").val() == "") {
			return false;
		}
		//2)、格式判断
		// 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
		let reg = /^[a-zA-Z_]\w{1,9}$/;
		if (!reg.test($("#username").val())) {
			return false;
		}
		return true;
	}
	//2、密码的前端验证
	function isPass() {
		//1)、非空判断
		if ($("#userpass").val() == "") {
			return false;
		}
		//2)、格式判断
		// 数字，6-16位
		let reg = /^\d{6,16}$/;
		if (!reg.test($("#userpass").val())) {
			return false;
		}
		return true;
	}
	//二、后端验证
	let hasUser = false;//该用户名不存在
	function hasUserBack() {
		//后端验证用户名是否存在
		$.get("goodsAndShoppingCart/checkUser.php", { "username": $("#username").val() }, function (data) {
			if (data == "0") {
				$("#showUser").html("亲，该用户名已经存在，请重新思考！");
				$("#showUser").css({ "color": "red" });
				hasUser = true;
			} else {
				$("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
				$("#showUser").css({ "color": "green" });
				hasUser = false;
			}
		})
	}

	$(function () {
		$("#username").blur(function () {
			//1、前端验证
			if (isUserName() == false) {
				$("#showUser").html("亲，用户名的格式不正确！");
				return;
			}
			//2、后端的验证
			hasUserBack();
		});

		$("#userpass").blur(function () {
			//1、前端验证
			if (isPass() == false) {
				$("#showPass").html("亲，密码格式不正确	！");
				return;
			} else {
				$("#showPass").html("√");
			}
		});

		$("#btnReg").click(function () {
			//1、前端验证
			if (isTest() == false) {
				$("#messageBox").html("亲，您的信息输入不全");
				return;
			}
			//2、用户名是否存在(后端验证)
			if (hasUser) {
				return;
			}
			$.post(
				"../goodsAndShoppingCart/addUser.php",
				{
					"username": $("#username").val(),
					"userpass": $("#userpass").val()
				},
				function (data) {
					if (data.trim() == "success") {
						$("#messageBox").css({ "color": "green" });
						$("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
						setTimeout(() => {
							location.href = "denglu.html";
						}, 2000);
					} else if (data == "fail") {
						$("#messageBox").css({ "color": "red" });
						$("#messageBox").html("不好意思，注册失败!");
					} else {
						$("#messageBox").css({ "color": "red" });
						$("#messageBox").html("不好意思，服务器出问题了!");
					}
				}
			);
		});
	});

	
</script>
<!-- <script src="../goodsAndShoppingCart/addUser.php"></script> -->
<script src="../goodsAndShoppingCart/addUser.php"></script>
